<template>
	<div>
		<van-nav-bar title="个人信息" left-text="返回" left-arrow @click-left="$router.back()" />
		<div>
			<!-- 显示个人信息 -->
			<div v-show="editInfoShow === false">
				<div class="shop-info">
					<p class="shop-info-p">用户名(手机号)：</p>
					<p>{{user.phone}}</p>
				</div>
				<div class="shop-info">
					<p class="shop-info-p">昵称：</p>
					<p>{{user.nickname}}</p>
				</div>
				<div class="shop-info">
					<p class="shop-info-p">用户头像：</p>
					<p>{{user.userAvatar}}</p>
				</div>
				<van-button round type="primary" style="width: 30%; margin-right: 20px;" @click="editInfoShow = true">
					修改信息</van-button>
			</div>
			<!-- 修改个人信息 -->
			<div v-show="editInfoShow === true">
				<van-form>
					<van-field v-model="user.nickname" name="nickname" label="昵称" />
					<van-field v-model="user.userAvatar" name="userAvatar" label="用户头像" />
				</van-form>
				<div style="display: flex; justify-content: center;">
					<van-button round type="danger" style="width: 30%; margin-right: 20px;"
						@click="editInfoShow = false">取消</van-button>
					<van-button round type="info" style="width: 30%; margin-left: 20px;" @click="saveUserInfo">保存信息
					</van-button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				user: {},
				editInfoShow: false //是否为编辑标识
			}
		},
		mounted() {
			let user = this.$cookies.get('user')
			if (user != null) {
				this.user = user
				
			}
		},
		methods: {
			//修改用户信息
			saveUserInfo() {
				let _this = this
				_this.$axios({
					method: 'put',
					url: '/user/updateInfo',
					data: {
						id: _this.user.id,
						nickname: _this.user.nickname,
						userAvatar: _this.user.userAvatar
					}
				}).then((resp) => {
					if (resp.code == 200) {
						_this.$notify({
							type: 'success',
							message: resp.msg
						})
						this.$router.push('/personal')
					}
				})
			}
		}
	}
</script>

<style scoped>
	.shop-info {
		display: flex;
		margin-left: 10px;
	}
</style>
